<template>
  <!-- 顶部搜索 -->
  <van-sticky>
    <div class="search">
      <input type="text" placeholder="请输入商家或商品名称" />
      <van-icon class="searchIcon" name="search" />
      <button>搜索</button>
    </div>
  </van-sticky>
</template>

<script>
import { defineComponent } from 'vue'
// 引入头部导航自定义组件
export default defineComponent({
  components: {}
})
</script>

<style lang="scss" scoped>
.search {
  height: 0.54rem;
  background-color: #ffcc33;
  display: flex;
  padding: 0 0.12rem;
  position: relative;
  .searchIcon {
    position: absolute;
    top: 33%;
    left: 6%;
  }
  button {
    width: 0.6rem;
    height: 0.31rem;
    position: absolute;
    border-radius: 0.2rem;
    border: 0;
    background: #ffcc33;
    position: absolute;
    top: 0.12rem;
    right: 0.17rem;
  }
}
.search input {
  margin-top: 0.09rem;
  width: 3.9rem;
  height: 0.38rem;
  border: 0;
  border-radius: 0.2rem;
  padding-left: 0.38rem;
  font-size: 0.14rem;
}
</style>
